<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>JqueryTmpl--模板插件</title>
	<script src="../jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
	<script src="jquery.tmpl.js" type="text/javascript"></script>
	<style>
		.treeView li li {margin-left:18px;} .expand {vertical-align:middle;margin-right:7px;display:inline-block;border:1px solid #555;text-align:center;height:12px;width:12px;line-height:11px;background-color:#f8f8f8;color:Blue;} 
		.treeView, .treeView ul {padding:0;margin:0;} .treeView li {margin-left:8px;list-style-type:none;padding:2px;cursor:pointer;} .treeView li.folderItem {color:Blue;text-decoration:underline;font-style:italic;margin-bottom:4px;}
	</style>
</head>
<body>

<!-- ------------------$.template(name,template)和$.tmpl(template,data)----------- -->
<div>
<ul id="dom2"></ul>
<script type="text/javascript">
  var data2 = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
  ];
  $("#dom2").empty();
  $.template("Template2", "<li><b>${Name}</b>(${ReleaseYear})</li>");
  $.tmpl("Template2", data2).appendTo("#dom2");
</script>
<hr/>
</div>

<!-- ---------------------------$(selector).tmpl(data[,options])------------------ -->
<div>
<ul id="dom3"></ul>
<script id="Template3" type="text/x-jquery-tmpl">
    <li>
		<b>{{= Name}}</b>

		{{if ReleaseYear=='1998'}}
			(${ReleaseYear}) 
		{{else}}
			(${ReleaseYear}) 
		{{/if}}

		{{html Synopsis}}

		{{each(i, language) Languages}}
            ${i + 1}: <em>${language}</em>
        {{/each}}

		{{each(i, pag) Pags}}
            ${i + 1}: <em>${pag.Name}</em>
        {{/each}}

		{{tmpl(Pags) "#PagTemplate"}}

		{{= $item.aaa()}}
		{{= $item.getLanguages("-")}}
	</li>
</script>
<script id="PagTemplate" type="text/x-jquery-tmpl">
	${Name}
</script>
<script type="text/javascript">
	var data3 = [
		{ Name: "AAAA", ReleaseYear: "1998", Synopsis: "1111<b>2222</b>33333", Languages: ["French"], Pags: [{ Name: "WWW" },{ Name: "QQQ" }] },
		{ Name: "BBBB", ReleaseYear: "1999", Synopsis: "a<span>b</span>c", Languages: [], Pags: [{ Name: "QQQ" },{ Name: "WWW" }] },
		{ Name: "CCCC", ReleaseYear: "1976", Synopsis: "a<span>b</span>c", Languages: ["Mandarin", "Cantonese"], Pags: [{ Name: "EEE" },{ Name: "QQQ" }] }
	];
	$("#dom3").empty();
	//简易用法： $("#Template3").tmpl(data3).appendTo("#dom3");
	$("#Template3").tmpl(data3,
		{ 
			aaa: function() {return this.data.Name;},
	    	getLanguages: function(separator) {return this.data.Languages.join(separator);}
		}
	).appendTo("#dom3");
</script>
<hr/>
</div>

<!-- ----------------------------------------------------------------------------- -->
<div>
<script id="folderTmpl" type="text/x-jquery-tmpl">
    <li class="toggle">
        <span class="expand">${expanderSymbol($item)}</span>
        <span>${name}</span>
    </li>
    {{if expanded}}
        <li>
            <ul>{{tmpl(getFolderItems($item)) "#itemTmpl"}}</ul>
            <ul>{{tmpl(getSubFolders($item)) "#folderTmpl"}}</ul>
        </li>
    {{/if}}
</script>

<script id="itemTmpl" type="text/x-jquery-tmpl">
    <li class="folderItem">${name}</li>
</script>

<ul id="samplesList" class="treeView"><li></li></ul>

<script>
var folders = {
    name: "1",
    folders: [
        { name: "1-1", folders: [
            { name: "1-1-1"}
        ]},
        { name: "1-2", folders: [
            { name: "1-2-1", folders: [
                { name: "1-2-1-1"}
            ]},
        ]},
    ]
};
var samples = [
    { name: "c", 
        folders: [ "1-1-1" ], 
        description: "ccccccccc" },
    { name: "b", 
        folders: [ "1-1-1" ], 
        description:"bbbbbbbbbbbbb" },
    { name: "a", 
        folders: [ "1-1" ], 
        description: "aaaaaaaaaaaa" },
    { name: "d", 
        folders: [ "1-2-1-1", "1-1-1" ], 
        description: "dddddddddddddd" }
];

$.extend( window, { 
    getFolderItems: function( tmplItem ) {
        return $.map( samples, function( sample ) {
            return $.inArray( tmplItem.data.name, sample.folders ) > -1 ? sample : null;
        });
    }, 
    getSubFolders: function( tmplItem ) {
        return tmplItem.data.folders || [];
    }, 
    expanderSymbol: function( tmplItem ) {
        return tmplItem.data.expanded ? "-" : "+";
    }
});

$( "#folderTmpl" ).tmpl( folders ).appendTo( "#samplesList" );

$( "#samplesList" )
    .delegate( ".toggle", "click", function() {
        var tmplItem = $.tmplItem( this );
        tmplItem.data.expanded = !tmplItem.data.expanded;
        tmplItem.update();
    })
    .delegate( ".folderItem", "click", function() {
        alert( $.tmplItem( this ).data.description );
    });
</script>
</div>

</body>
</html>